<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- css -->
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">

    <style>
        html,body{
            width:100%;
            height:100%;

            margin:0px;
        }
        #main{
            width:100%;
            height:100%;
            /* background:red;*/
            display:flex;
            flex-wrap: wrap;
            flex-direction:row;
            justify-content: start;
        }
        .top-head{
            width: 100%;
            height: 10%;
            /* background: orange;*/
            display:flex;
            flex-wrap: nowrap;
            justify-content:center;
        }
        .left-menu{
            width:12%;
            height: 90%;
            margin: auto;
            padding: 15px
            /*background:#bfcbd9;*/
        }
        .right-content{
            width: 88%;
            height:90%;
            /*   background:blue;*/
        }
        #logo{
            width:10%;
            height:100%;
            line-height:80px;
            /*background:purple;*/
        }
        #title{
            width:50%;
            font-size: 28px;
            text-align:center;
            line-height: 80px;
            margin-left: auto;
            /*background:#eee;*/
        }
        #per-mes{
            width:20%;
            height:100%;
            line-height: 80px;
            /*background:green;*/
        }
        li{
            list-style:none;
        }

        a{
            text-decoration: none;
        }
        a:focus, a:hover {
            color: #23527c;
            text-decoration: none;
        }
        li:hover{
            list-style:none;
        }

    </style>

    <script type="text/javascript">
        function bodyLoad(){
            var dateTime=new Date();
            var hh=dateTime.getHours();
            if(hh<10) hh = '0' + hh;
            var mm=dateTime.getMinutes();
            if(mm<10) mm = '0' + mm;
            var ss=dateTime.getSeconds();
            if(ss<10) ss = '0' + ss;
            var yy=dateTime.getFullYear();

            var MM=dateTime.getMonth()+1;  //因为1月这个方法返回为0，所以加1
            var dd=dateTime.getDate();

            var week=dateTime.getDay();

            var days=[ "日 ", "一 ", "二 ", "三 ", "四 ", "五 ", "六 "]

            document.getElementById("date").value=yy+"年"+MM+"月"+dd+"日 "+"星期"+days[week] ;
            document.getElementById("time").value=hh+":"+mm+":"+ss;

            setTimeout(bodyLoad,1000);
        }
    </script>
</head>


<body onload="bodyLoad()" background="img/timg.jfif">
<div id="main">
    <div class="top-head" style="background: #EEEEEE">

        <div id="title">城市垃圾分类查询及处罚后台管理系统</div>
        <div id="per-mes">您好，城管同志。欢迎您使用本系统！ </div>
    </div>

    <div class="left-menu " style="background: #EEEEEE">
        <!-- 侧边栏标签页 -->
        <ul class="nav nav-stacked">
            <!-- 侧边栏选项 -->
            <li role="presentation">
                <!-- 选项控制data-target对应的显隐 -->
                <h3><label data-toggle="collapse" data-target="#list" class="btn btn-lg">处罚记录</label></h3>
                <!-- 隐藏的详细菜单 -->
                <ul id="list" class="collapse in">
                    <li class="active">
                        <a class="btn btn-lg" href="${pageContext.request.contextPath}/record/allRecordC" target="iframe-a">
                            处罚记录
                        </a>
                    </li>
                    <li><a class="btn btn-lg" href="${pageContext.request.contextPath}/record/toAddRecord" target="iframe-a">
                        添加添加记录
                    </a>
                    </li>
                    <li><a class="btn btn-lg" href="${pageContext.request.contextPath}/record/toChart" target="iframe-a">
                        处罚统计
                    </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="right-content">

        <div style="margin:10px;">
            <input type="text" id="date" style="border:0 none; background-color: transparent;" /><input type="text" id="time" style="border:0 none; background-color: transparent;" />
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="http://localhost:8088/record/allRecordC" name="iframe-a"></iframe>
            </div>
        </div>
    </div>
</div>

</body>

